<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>{{title}}</title>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<!--浏览器渲染设置-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<!--各平台个性化视觉设置(自行补充)-->
<link rel="shortcut icon" type="image/x-icon" href="../static/common/brower/favicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="../static/common/brower/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="../static/common/brower/apple-touch-icon.png">
<!--移动端特性设置-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="My WebAPP">
<!--项目全局CSS资源引用-->
<link rel="stylesheet" href="../../static/lib/jqueryP/rui/rui.min.css" />
<link rel="stylesheet" href="../../static/common/common.css" />
<!--项目全局JS资源引用-->
<script src="../../static/require.js"></script>
<script src="../../static/requireConfig.js"></script>
<!-- --------------------------------页面模板公用头部结束-------------------------------- -->
<!--当前页面私有样式-->
<!--<link rel="stylesheet" href="static/index/index.css" />-->
<style>
	
</style>
</head>
<body>

<div class="pageHeader">
	<h3>
		夜间勤务统计
		<a href="javascript://" rel="tooltip" title="根据您选定的时间段，提供网站流量数据，通过流量的趋势变化形态，可帮助您分析出网站访客的访问规律、网站发展状况等。" class="iconfont">&#228</a>
		<small><i>2015-09-08</i> 至 <i>2015-09-08</i></small>
	</h3>
	
	<div class="analyTime">
		<a href="javascript://" class="act">今天</a>
		<input type="text" placeholder="2015-08-03">
	</div>

	<div class="analyTool">
		<a href="javascript://"> <i class="iconfont">&#392</i> 下载报表</a>
	</div>
	
</div>


<div class="pageBody">
	
	<div class="analyPage">
		<!--时间选择&报表工具 移动到页面标题栏部分-->

		
		<div class="analySummay">
			<table>
				<tr>
					<th>总行驶里程(km)<a href="javascript://" rel="tooltip" title="当日的独立访客中，历史上首次访问网站的访客为新独立访客。" class="iconfont">&#228</a></th>
					<th>单车平均行驶里程(km)<a href="javascript://" rel="tooltip" title="访客从进入网站到离开网站的一系列活动记为一次访问，也称会话(session),1次访问(会话)可能包含多个PV。" class="iconfont">&#228</a></th>
					<th>最大单车行驶里程(km)<a href="javascript://" rel="tooltip" title="平均每个独立访客产生的PV。人均浏览页数=浏览次数/独立访客。体现网站对访客的吸引程度。" class="iconfont">&#228</a></th>
				</tr>
				<tr>
					<td>63242</td>
					<td>3235</td>
					<td>6541</td>
				</tr>
			</table>
		</div>

		<div class="analyChart">
			<div id="container" style="min-width:700px;height:400px"></div>
		</div>

		<div class="analyReport">
			<table class="rTable noborder">
				<tr>
					<th>时段</th>
					<th>车辆</th>
					<th>行驶里程(km)</th>
				</tr>
				<tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr>
				<tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr>
				<tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr>
				<tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr>
				<tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr>
                
                <tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr><tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr>
				<tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr>
				<tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr>
				<tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr>
				<tr>
					<td>2015-08-03</td>
					<td>皖A 11035</td>
					<td>216</td>
				</tr>
			</table>
		</div>
	</div>
	
	
</div>


<!--当前页面私有JS-->
<script type="text/javascript">
	require(['common', 'highchart'], function(){
		//报表时间选择
		$('.analyTime a').on('click', function(){
			$('.analyTime a').removeClass('act');
			$(this).addClass('act');
		})
		
		
		//图表
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: false,
            subtitle: false,
            xAxis: {
                categories: ['皖A 10039', '皖A 10023', '皖A 10032', '皖A 10022', '皖A 10032', '皖A 10023', '皖A 10032', '皖A 10022', '皖A 10023', '皖A 10032', '皖A 10022', '皖A 10023'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ' km'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                name: '2015',
                data: [85, 31, 52, 35, 2, 30, 31, 26, 70, 31, 70, 54]
            }]
        });
	})
</script>
<!-- --------------------------------页面模板公用底部开始-------------------------------- -->
</body>
</html>